<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>前后端交互用户操作表1</title>
		<script src="../js/axios.js"></script>
		<script src="../js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<a name="_top"></a>
			<div align="center">
				<h3>用户新增</h3>
				<table>
					<tr>
						<th>姓名：<input type="text" v-model="inUser.name"/></th>
						<th>年龄：<input type="text" v-model="inUser.age"/></th>
						<th>性别：<input type="text" v-model="inUser.sex"/></th>
						<th><a href="#_floor"><button @click="insertUser()" style="background-color: green;border-color: green;color: white;">新增</button></a></th>
					</tr>
				</table>
			</div>
			<div align="center">
				<a name="_update"></a>
				<h3>用户修改</h3>
				<table>
					<tr>
						<th>编号：<input type="text" v-model="upUser.id" disabled/></th>
						<th>姓名：<input type="text" v-model="upUser.name"/></th>
						<th>年龄：<input type="text" v-model="upUser.age"/></th>
						<th>性别：<input type="text" v-model="upUser.sex"/></th>
						<th><button @click="updateUser()">修改</button></th>
					</tr>
				</table>
			</div>
			<div>
				<table border="1px" width="1000px" align="center" bordercolor="blue">
					<tr>
						<th colspan="5" align="center">用户列表</th>
					</tr>
					<tr align="center">
						<th>编号</th>
						<th>姓名</th>
						<th>年龄</th>
						<th>性别</th>
						<th>修改</th>
					</tr>
					<tr align="center" v-for="user in userList">
						<td v-text="user.id"></td>
						<td v-text="user.name"></td>
						<td v-text="user.age"></td>
						<td v-text="user.sex"></td>
						<td width="100px">
				<a href="#_update"><button @click="echo(user)" style="background-color: royalblue;border-color:white;color: white;">修改</button></a>	
							<button @click="deleteOne(user)" style="background-color: red;border-color:white;color: white;">删除</button>
						</td>
					</tr>
				</table>
				<div align="right">
					<a href="#_top"><button style="background-color: yellowgreen;">回到顶部</button> </a>
				</div>
			</div>
			<a name="_floor"></a>
		</div>
		<script>
		axios.defaults.baseURL = "http://localhost:8080/user"
		const app = new Vue({
			el:"#app",
			data:{
				userList:[],
				inUser:{
					name:'',
					age:'',
					sex:''
				},
				upUser:{
					id:'',
					name:'',
					age:'',
					sex:''
				}
			},
			methods:{
				async getUserList(){
					let {data:promise} = await axios.get("/findAll")
					this.userList=promise
				},
				async deleteOne(user){
					 let {data:del} = await axios.delete("/deleteOne?id="+user.id)
					alert(del)
					this.getUserList()
				},
				async insertUser(){
					let {data:ins} = await axios.post("/insertUser",this.inUser)
					alert(ins)
					this.getUserList()
					this.inUser={}
				},
				echo(user){
					this.upUser.id=user.id
					this.upUser.name=user.name
					this.upUser.age=user.age
					this.upUser.sex=user.sex
					this.getUserList()
				},
				async updateUser(){
					let {data:up} = await axios.put("/updateUser",this.upUser)
					alert(up)
					this.getUserList()
					this.upUser={}
				}
			},
			mounted:function(){
				this.getUserList()
			}
		})
		</script>
	</body>
</html>
